<template>
  <div>
    <bread-list :navData="navData"></bread-list>
<!--    卡片视图区-->
    <el-card>
      <el-row>
        <el-button type="primary" size="small" @click="openAddCateDialog">添加商品分类</el-button>
        <el-col>
          <!--        表格-->
          <tree-table class="treeTable" :selection-type="false" :expand-type="false" :show-index="true"
             index-text="#" :data="categoryList" :border="true" :columns="columns">
<!--            是否有效-->
              <template slot="isOk" slot-scope="scope">
                <i style="color: lightgreen;" class="el-icon-success" v-if="scope.row.cat_deleted === false"></i>
                <i style="color: red" class="el-icon-error" v-else></i>
              </template>
<!--            分类排序-->
             <template slot="order" slot-scope="scope">
               <el-tag size="middle"  v-if="scope.row.cat_level===0">一级</el-tag>
               <el-tag  size="middle" type="success" v-if="scope.row.cat_level===1">二级</el-tag>
               <el-tag size="middle" type="warning" v-if="scope.row.cat_level===2">三级</el-tag>
             </template>
            <!--                操作-->
            <template slot="opt" slot-scope="scope">
              <el-button icon="el-icon-edit"  type="primary" size="mini" @click="showEditCateDialog(scope.row)" >编辑</el-button>
              <el-button icon="el-icon-delete"  type="danger" size="mini" @click="deleteCate(scope.row)">删除</el-button>
            </template>
          </tree-table>

          <!--        分页-->

        </el-col>

      </el-row>
    </el-card>
<!--    添加分类对话框-->
    <el-dialog @close="addCateDialogClose" title="添加分类" :visible.sync="addCateGoryDialogVisible"  width="25%">
      <el-form :model="addCateForm" :rules="addCateFormRules" ref="addCateRefForm" label-width="80px"  >
      <el-form-item label="分类名称" prop="cat_name">
        <el-input  v-model="addCateForm.cat_name"></el-input>
      </el-form-item>
        <el-form-item label="父级分类" >
          <el-cascader
              style="width: 100%"
              :options="cateGoryList"
              :props="cascaderProps"
              expand-trigger="hover"
              v-model="selectedKeys"
              @change="handleChangeCate"
              clearable>
          </el-cascader>
        </el-form-item>
      </el-form>
      <!--        对话框底部区域-->
      <span slot="footer" class="dialog-footer">
        <el-button @click="addCateGoryDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="addCate()">确定</el-button>
      </span>
    </el-dialog>
<!--    编辑分类对话框-->
    <el-dialog @close="editCateDialogClose" title="编辑分类" :visible.sync="editCateGoryDialogVisible"  width="25%">
      <el-form :model="editCateForm" :rules="editCateFormRules" ref="editCateRefForm" label-width="80px"  >
        <el-form-item label="分类名称" prop="cat_name">
          <el-input  v-model="editCateForm.cat_name"></el-input>
        </el-form-item>
      </el-form>
      <!--        对话框底部区域-->
      <span slot="footer" class="dialog-footer">
        <el-button @click="editCateGoryDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="editCate()">确定</el-button>
      </span>
    </el-dialog>

    <!--        分页区域-->
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.pagenum"
        :page-sizes="[10, 20, 40, 50]"
        :page-size="queryInfo.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
    </el-pagination>
  </div>
</template>

<script>
import BreadList from "../common/BreadList";
export default {
  name: "GoodsCate",
  components:{
    BreadList
  },
  data(){
    return{
      navData:{
        navNameFir:'商品管理',
        navSecond:'商品分类列表',
        path:'/home'
      },
      cat_id:0,
      addCateGoryDialogVisible:false,
      addCateForm:{ //添加商品分类相关数据
        cat_name:'', //分类名称
        cat_pid:0,
        cat_level:0 //分类等级默认要添加的是以及分类


      },
      cateGoryList:[],
      cascaderProps:{ //级联配置项
        label:'cat_name',
        value:'cat_id',
        children:'children',
        checkStrictly: true
      },
      selectedKeys:[]  ,//选中的级联选择项的id
      categoryList:[] ,// 商品分类列表
      // 查询条件
      queryInfo:{
        type:3,
        pagenum:1,
        pagesize:10
      },
      total:0, // 分类总数据
      addCateFormRules:{
        cat_name:[
          {required:true, message:'请输入分类名称',trigger:'blur'}
        ]
      },
      editCateFormRules:{
        cat_name:[
          {required:true, message:'请输入分类名称',trigger:'blur'}
        ]
      },
      editCateGoryDialogVisible:false,
      editCateForm:{
        cat_name:''
      },
      columns:[
        {
          label:'分类名称',
          prop:'cat_name'
        },
        {
          label: '是否有效',
          // prop:'cat_deleted',
          type:'template',
          template:'isOk'
        },
        {
           label:'排序',
           type:"template",
          template:'order'
        },
        {
          label:'操作',
          type:"template",
          template:'opt'
        }
      ]
    }
  },
  mounted() {
    this.getGoodsCateList()
  },
  methods:{
    // 获取分类列表
    async getGoodsCateList(){
      const { data:res } = await this.$http.get('categories',{params:this.queryInfo})
      if(res.meta.status === 200 ){
        this.categoryList = res.data.result
        this.total = res.data.total
      }else{
        this.$message.error(res.meta.status)
      }
      console.log(res);
    },
    // 监听pageSize
    handleSizeChange(newSize){
      this.queryInfo.pagesize = newSize
      this.getGoodsCateList()
    },
    // 监听pagenum改变
    handleCurrentChange(newPage){
      this.queryInfo.pagenum = newPage
      this.getGoodsCateList()
    },
    //打开添加商品分类弹框
    openAddCateDialog(){
      this.getGoodsCate()
      this.addCateGoryDialogVisible = true
    },
    // 获取商品分类列表2级分类
    async getGoodsCate(){
      const {data:res} = await this.$http.get('categories',{params:{type:2}})
      const {data:data,meta:meta} = res
      meta.status === 200 ? this.cateGoryList = data : this.$message.error(meta.msg)
    },
    // 监听级联选择器的变化
    handleChangeCate(){
      console.log(this.selectedKeys);
      if(this.selectedKeys.length >0){
        this.addCateForm.cat_pid= this.selectedKeys[this.selectedKeys.length-1]
        this.addCateForm.cat_level = this.selectedKeys.length
      }else {
        this.addCateForm.cat_pid= 0
        this.addCateForm.cat_level = 0
      }
      // console.log(this.addCateForm);
    },
    // 提交添加分类参数
    addCate(){
      console.log(this.addCateForm);
      this.addCategoryForm()
    },
    //清空对话框
    addCateDialogClose(){
      this.$refs.addCateRefForm.resetFields()
      this.selectedKeys = []
      this.addCateForm.cat_level = 0
      this.addCateForm.cat_pid = 0
    },
     addCategoryForm(){
      this.$refs.addCateRefForm.validate( async valid =>{
        if(valid){
          const { data:res } = await this.$http.post('categories',this.addCateForm)
          const {meta:meta} = res
          if(meta.status === 201){
            this.$message.success(meta.msg)
            this.addCateGoryDialogVisible = false
            await this.getGoodsCateList()
          }else {
            this.$message.error(meta.status)
          }
        }else {
          return
        }
      })
      // console.log(res);
    },
    //显示修改分类对话框
    showEditCateDialog(cateInfo){
      console.log(cateInfo);
      this.editCateGoryDialogVisible = true
      this.editCateForm.cat_name = cateInfo.cat_name
      this.cat_id = cateInfo.cat_id
    },
    // 提交编辑分类数据
    editCate(){
        this.$refs.editCateRefForm.validate(async valid => {
        if (valid) {
          const {data: res} = await this.$http.put('categories/' + this.cat_id, {cat_name: this.editCateForm.cat_name})
          if (res.meta.status === 200) {
            this.$message.success(res.meta.msg)
            await this.getGoodsCateList()
            this.editCateGoryDialogVisible = false
          } else {
            this.$message.error(res.meta.msg)
            this.editCateGoryDialogVisible = false
          }
        } else {
          return
        }
      })
      // console.log(res);
    },
    editCateDialogClose(){
      this.$refs.editCateRefForm.resetFields()
    },
    //删除商品分类
    async deleteCate(cateInfo){
      const confirm = await this.$confirm('此操作将永久删除' + cateInfo.cat_name +  '分类,是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).catch(err => err)
      console.log(confirm);
      if(confirm === 'confirm'){
        const {data:res} = await this.$http.delete('categories/' + cateInfo.cat_id)
        res.meta.status === 200 ? this.$message.success(res.meta.msg)&& await this.getGoodsCateList() : this.$message.error(res.meta.msg)
      }
    }
  }
}
</script>

<style lang="less" scoped>
.treeTable{
  margin-top: 15px;
}
i{
  color: green;
}

</style>